<template>
	<view class="warp">
		<view class="search">
			<van-search v-model="value" background="#fff" @search="goSearch" @clear="clearKey"
				placeholder="请输入剧名或其他关键字" />
		</view>
		<view v-if="!show">
			<view class="history">
				<text>热门搜索</text>
				<!-- <image src="../../static/shanchu.png" mode="widthFix" @click="clearAll"></image> -->
			</view>
			<view class="list">
				<view class="content" v-for="(el,index) in listKey" :key="index" @click="goDetails(el)">
					<text class="contentId">{{index+1}}</text>
					<text class="contentTitle">{{el.name}}</text>
				</view>
			</view>
			<view class="history">
				<text>热剧推荐</text>
			</view>
			<view class="cate-rdata" @click="goToDetails(el)" v-for="(el,index) in hotList" :key="index">
				<navigator url="11">
					<image class="image" :src="el.cover_img" />
				</navigator>
				<view class="cate-rinfo">
					<text class="cate-rtitle">
						{{el.name}}
					</text>
					<view class="cate-rfooter">
						<view class="cate-rnum">更新至{{el.count}}集</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="cate-rdata" @click="goToDetails(el)" v-for="(el,index) in cateObj" :key="index">
			<navigator url="11">
				<image class="image" :src="el.cover_img" />
			</navigator>
			<view class="cate-rinfo">
				<text class="cate-rtitle">
					{{el.name}}
				</text>
				<view class="cate-rfooter">
					<view class="cate-rnum">更新至{{el.count}}集</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSearchVideo,
		getSearchHot
	} from '../../module/index.js'
	export default {
		data() {
			return {
				value: "",
				listKey: [],
				cateObj: [],
				hotList: [],
				show: false
			}
		},
		onShow() {
			// this.listKey = uni.getStorageSync('listKey') || []
			this.getSearchHot()
		},
		methods: {
			clearKey() {
				this.show = false
			},
			// clearAll() {
			// 	uni.removeStorageSync('listKey');
			// 	this.listKey = uni.getStorageSync('listKey') || []
			// },
			// 搜索请求
			goSearch(event) {
				let obj = {
					name: event.detail
				}
				if (event.detail == "") {
					return uni.showToast({
						title: "搜索内容不能为空",
						icon: "none"
					})
				}
				getSearchVideo(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.cateObj = res.data
						this.show = true
						if (res.data.length == 0) {
							this.show = false
							uni.showToast({
								title: "无匹配结果",
								icon: "none"
							})
						}
						// else {
						// 	this.listKey.unshift({
						// 		name: event.detail
						// 	})
						// 	uni.setStorageSync('listKey', this.listKey)
						// }
					} else {
						this.show = false
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getSearchHot() {
				getSearchHot().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.listKey = res.data.data
						this.hotList = res.data.recommended
					} else {
						this.show = false
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goDetails(el) {
				uni.navigateTo({
					url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + el.id
				});
			},
			goToDetails(el) {
				if (el.video_detail_id == false) {
					uni.navigateTo({
						url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + el.id
					});
				} else {
					uni.navigateTo({
						url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + el.id +
							'&video_detail_id=' + el.video_detail_id
					});
				}
			}
		}
	}
</script>

<style scoped>
	.warp {
		padding-bottom: 66rpx;
	}

	.search {
		height: 100rpx;
		background-color: #fff;
	}

	.history {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 12rpx 12rpx;
		color: #535353;
		font-size: 26rpx;
	}

	image {
		width: 45rpx;
		height: 45rpx;
	}

	.list {
		width: 100%;
		display: flex;
		justify-items: flex-start;
		flex-wrap: wrap;
		padding: 0px 24rpx;
		box-sizing: border-box;
	}

	.list .content:nth-child(1) text:nth-child(1) {
		background-color: #D00000;
	}

	.list .content:nth-child(2) text:nth-child(1) {
		background-color: #f1a100;
	}

	.list .content:nth-child(3) text:nth-child(1) {
		background-color: #00bc8a;
	}

	.content {
		width: 46%;
		border-radius: 8rpx;
		margin: 8rpx 12rpx;
		text-align: left;
		margin: 12rpx 0rpx;
		display: flex;
		align-items: center;
	}

	.contentId {
		width: 20px;
		height: 20px;
		background-color: #878787;
		margin-right: 12rpx;
		display: inline-block;
		text-align: center;
		line-height: 20px;
		border-radius: 6rpx;
		color: #FFFFFF;
	}

	.contentTitle {
		color: #585858;
		width: 80%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.cate-rdata {
		display: flex;
		padding: 20rpx 30rpx 0;
	}

	.cate-rinfo {
		flex: 1;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		min-width: 1px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	/* .cate-rbtn {
		display: block;
		background-color: #5B78FF;
		z-index: 10000;
		color: #fff;
		font-size: 26rpx;
		padding: 6rpx 20rpx;
		border-radius: 40rpx;
	} */

	.cate-rfooter {
		display: flex;
		align-items: center;
	}

	.cate-rnum {
		flex: 1;
		font-size: 24rpx;
		font-weight: 400;
	}

	/* .cate-rdesc {
		display: block;
		font-size: 24rpx;
		line-height: 36rpx;
		height: 36rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding: 10rpx 0;
		margin-bottom: 10rpx;
		font-weight: 400;
	} */

	.cate-rtitle {
		font-size: 28rpx;
		display: block;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-weight: bold;
	}

	.image {
		width: 160rpx;
		height: 180rpx;
	}
</style>
